import { Callout } from '@/components'

# SetAtom

SetAtom 컴포넌트는 Jotai의 [useSetAtom](https://jotai.org/docs/core/use-atom#usesetatom) 훅과 동일한 인터페이스를 Props로 제공하며 선언적으로 사용할 수 있습니다.

### props.atom

Jotai의 atom을 그대로 사용할 수 있습니다.

```tsx /SetAtom/
import { SetAtom } from '@suspensive/jotai'
import { atom } from 'jotai'

const switchAtom = atom(false)

const Example = () => (
  <SetAtom atom={switchAtom}>
    {(setCount) => (
      <>
        <button onClick={() => setCount(true)}>Set True</button>
        <button onClick={() => setCount(false)}>Set False</button>
      </>
    )}
  </SetAtom>
)
```

Async Atom일 경우 프로미스(Promise)가 해결(resolve) 되기 전까지, 부모의 Suspense에게 Promise의 pending 상태를 위임합니다.

```tsx /SetAtom/
import { SetAtom } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { atom } from 'jotai'

const request = async () => fetch('https://...').then((res) => res.json())
const baseAtom = atom(0)

const Example = () => (
  <Suspense fallback={'pending...'}>
    <SetAtom atom={baseAtom}>
      {(setValue) => (
        <>
          {/* 프로미스(Promise)가 해결되기 전까지 Suspend가 발생됩니다. */}
          <button onClick={() => setValue(request())}>request</button>
        </>
      )}
    </SetAtom>
  </Suspense>
)
```

### 동기

[`<Atom/>`](https://suspensive.org/ko/docs/jotai/Atom)의 동기와 같이 `<SetAtom/>` 또한, 상위 컴포넌트에서 명확하게 드러나지 않습니다. 하위에 선언된 컴포넌트가 내부적으로 어떤 Atom을 사용하고, Suspense를 발생할지 예상하기 어렵습니다.
